<html>
<head>
<title>jQuery Hello World</title>
</head>
 
<body>

 <!--[if IE]><script language="javascript" type="text/javascript" src="lib/excanvas.js"></script><![endif]-->
<script src="prototype.js"></script>
<script src="lib/base64.js"></script>
<script src="lib/canvas2image.js"></script>
<script src="lib/canvastext.js"></script>
<script src="flotr-0.2.0-alpha.js"></script>
<script type="text/javascript">
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
/**
 * Wait till dom's finished loading.
 */
document.observe('dom:loaded', function(){
	var resource = gup('test');
	var d0 = [];
	var d1 = [];
	for(n = 0; n < 72; n++){
		x = n;
		d0.push([x, 0]);
	}
	d1 = [[0,100], [1,99], [2,97], [3,80], [4,70],[5, 70], [6,60],[7,60], [8,58], [9,55], [10, 50],[11, 30], [12,10],[13,10],[14,10],[15,10],[16,10],[24,10],[25,5],[30,5],[40,0]];
	/**
	 * Global options object.
	 */
	var options = {
		selection:{mode:'x',fps:30}
	};
	
	/**
	 * Function displays a graph in the 'container' element, extending
	 * the global options object with the optionally passed options.
	 */
	function drawGraph(opts){
		/**
		 * Clone the options, so the 'options' variable always keeps intact.
		 */
		var o = Object.extend(Object.clone(options), opts || {});
		/**
		 * Return a new graph.
		 */
		return Flotr.draw(
			$('container'), 
			[ d0, d1 ],
			o
		);
	}	
	
	/**
	 * Actually draw the graph.
	 */
	var f = drawGraph();			
	
	/**
	 * Hook into the 'flotr:select' event.
	 */
	$('container').observe('flotr:select', function(evt){
		/**
		 * Get the selected area coordinates passed as event memo.
		 */
		var area = evt.memo[0];
		
		/**
		 * What happens: empty the container element, and draw a new 
		 * graph with bounded axis. The axis correspond to the selection
		 * you just made.
		 */
		f = drawGraph({
			xaxis: {min:area.x1, max:area.x2},
			yaxis: {min:area.y1, max:area.y2}
		});
	});
	
	/**
	 * Observe click event on the reset-btn. Reset the graph when clicked.
	 * The drawGraph function wrapped in another function otherwise it get's 
	 * an Event object passed as first argument, while it expects an options
	 * object.
	 */
	$('reset-btn').observe('click', function(){drawGraph()});
	
	var form = document.getElementById('resource-name');
	form.style.display = 'inline';
	form.innerHTML+=resource;

});	
</script> 
<div id="container" style="width:300px;height:480px;"></div>
<p><button id="reset-btn">Reset</button></p>
<div id="resource-name" style="width:140px;height:14px;"></div>
 
</body>
</html>